<template>
  <div class="box">
    <!-- 标题 -->
    <div class="title">
      <div class="title_fan">
        <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
      </div>
      <!-- 图片信息 -->
      <div class="title_cen">
        <div class="title_cen_one">
          <span>可转帐余额</span><img src="../../../../assets/static/transfer/q1.png">
        </div>
        <div class="title_cen_tow">
          <img src="../../../../assets/static/transfer/q2.png">
          <span>2017.25</span>
        </div>
        <div class="title_cen_three">
          <div class="title_cen_three_back"></div>
        </div>
        <div>总余额：$20.00</div>
      </div>
    </div>
    <!-- transfer -->
    <div class="transfer">
      <!-- 标题 -->
      <div class="transfer_title">
        <img src="../../../../assets/static/recharge/q4.png" alt=""/>
        <div>转账到</div>
      </div>
      <!-- 转账 card -->
      <div @click="$router.push({path:'/listaddReceiverAccount'})" class="transfer_card">
        <div>
          <img src="../../../../assets/static/transfer/t0.jpg" alt="">
          <span>其他i·JoozPay Wallet</span>
        </div>
        <div class="el-icon-arrow-right"></div>
      </div>
    </div>
  </div>
</template>

<script>
</script>

<style scoped>
.box {
  height: 100vh;
  background-color: #f5f5f5;
}

/* 标题 */
.title {
  background-image: linear-gradient(to bottom, #7ac91b 65%, #f5f5f5 0);
  font-weight: bold;
}

.title .title_fan {
  color: #fff;
  font-size: 18px;
  padding: 15px;
}

.title_cen {
  margin: 0 5%;
  padding: 15px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 5px 5px 5px #ccc;
  text-align: center;
  font-size: 12px;
  color: #333333;
}

.title_cen_one {
  font-size: 15px;
}

.title_cen_one img {
  width: 13px;
  height: 13px;
  margin-left: 6px;
}

.title_cen_tow {
  font-size: 21px;
  font-weight: 600;
  margin: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title_cen_tow img {
  width: 21px;
  height: 21px;
  margin-right: 6px;
}

/* 进度条 */
.title_cen_three {
  background-color: #336202;
  height: 10px;
  border-radius: 15px;
  margin-bottom: 15px;
}

.title_cen_three_back {
  width: 40%;
  background-color: #FFB200;
  height: 10px;
  border-radius: 15px;
}

/* 转账 标题 */
.transfer_title {
  margin: 15px;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
}

.transfer_title div {
  margin-left: 13px;
}

/* 转账card */
.transfer_card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
}

.transfer_card > div:nth-child(1) {
  font-size: 14px;
  display: flex;
  align-items: center;
}

.transfer_card > div:nth-child(1) img {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  margin-right: 11px;
}
</style>
